<template>
  <el-row :gutter="24" class="pl80">
    <el-row>
      <el-col>
        <h2>
          从事或参与营利性活动及兼职情况
          <span class="red fs14">(表格数据新增或删除之后，请点击保存按钮提交)</span>
          <!-- <el-tooltip class="item" effect="dark" content="新增" placement="top">
            <el-button
              v-if="tableData.length <= 0"
              size="small"
              class="fr mr10"
              type="primary"
              icon="el-icon-plus"
              @click="handleAllEdit(false, {})"
            />
          </el-tooltip>
          <el-tooltip class="item mr10" effect="dark" content="修改" placement="top">
            <el-button
              class="fr"
              size="small"
              type="primary"
              icon="el-icon-edit"
              @click="handleAllEdit"
            />
          </el-tooltip>-->
          <el-tooltip class="item mr10" effect="dark" content="删除" placement="top">
            <el-button
              size="small"
              class="fr"
              type="danger"
              icon="el-icon-delete"
              @click="handleAllDelete"
            />
          </el-tooltip>
          <el-tooltip
            class="item mr10"
            effect="dark"
            :content="tableData.length > 0 ? '修改' : '新增'"
            placement="top"
          >
            <el-button
              class="fr"
              type="primary"
              size="small"
              :icon=" tableData.length > 0 ? 'el-icon-edit' : 'el-icon-plus'"
              @click="handleAllSave"
            />
          </el-tooltip>
        </h2>
      </el-col>
    </el-row>

    <el-row class="mb20">
      <el-col>
        <el-card shadow="never">
          <div slot="header">
            个人经商办企业情况
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="handleEdit(false, {})"
            />
          </div>
          <e-table
            ref="eTable"
            :tableData="tableData1"
            :columns="columns1"
            :loading="loading"
            :pageObj="null"
          >
            <el-table-column slot="action" fixed="right" width="50" align="center">
              <template slot-scope="scope">
                <el-dropdown>
                  <a class="el-dropdown-link">
                    <i class="el-icon-menu"></i>
                  </a>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="handleEdit(true, scope.row)">
                      <a>修改</a>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="handleDelete(scope.row, 1)">
                      <a class="red">删除</a>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </e-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="mb20">
      <el-col>
        <el-card shadow="never">
          <div slot="header">参与涉医等经营性活动情况</div>
          <e-table
            ref="eTable"
            :tableData="tableData2"
            :columns="columns2"
            :loading="loading"
            :pageObj="null"
            class="mb20"
          >
            <el-table-column label="医药类" slot="medicineFlag" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.medicineFlag" size="small">
                  <el-radio-button label="0">否</el-radio-button>
                  <el-radio-button label="1">是</el-radio-button>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="健康相关产品类" slot="healthFlag" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.healthFlag" size="small">
                  <el-radio-button label="0">否</el-radio-button>
                  <el-radio-button label="1">是</el-radio-button>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="营利性医疗卫生计生机构类" slot="forProfitHealthCareFlag" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.forProfitHealthCareFlag" size="small">
                  <el-radio-button label="0">否</el-radio-button>
                  <el-radio-button label="1">是</el-radio-button>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="基建项目类等市场经济活动" slot="constructProjecFlag" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.constructProjecFlag" size="small">
                  <el-radio-button label="0">否</el-radio-button>
                  <el-radio-button label="1">是</el-radio-button>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="其他" slot="otherReferToFlag" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.otherReferToFlag" size="small">
                  <el-radio-button label="0">否</el-radio-button>
                  <el-radio-button label="1">是</el-radio-button>
                </el-radio-group>
              </template>
            </el-table-column>
          </e-table>
          <el-input type="textarea" v-model="form.remark" :rows="3" placeholder="请输入备注" />
        </el-card>
      </el-col>
    </el-row>
    <el-row class="mb20">
      <el-col>
        <el-card shadow="never">
          <div slot="header">
            在企事业单位、社会团体或其他营利性组织中兼职情况
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="handleEdit2(false, {})"
            />
          </div>
          <e-table
            ref="eTable"
            :tableData="tableData3"
            :columns="columns3"
            :loading="loading"
            :pageObj="null"
          >
            <el-table-column slot="action" fixed="right" width="50" align="center">
              <template slot-scope="scope">
                <el-dropdown>
                  <a class="el-dropdown-link">
                    <i class="el-icon-menu"></i>
                  </a>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="handleEdit2(true, scope.row)">
                      <a>修改</a>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="handleDelete(scope.row, 2)">
                      <a class="red">删除</a>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </e-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="never">
          <div slot="header">从事或参与其他营利性活动情况</div>
          <el-input type="textarea" :rows="2" v-model="form.otherBusiness" />
        </el-card>
        <!-- <e-table
          ref="eTable"
          :tableData="tableData4"
          :columns="columns4"
          :loading="loading"
          :pageObj="null"
        />-->
      </el-col>
    </el-row>
    <job-modal @refresh="obj => handleRefresh(obj, 1)" ref="jobModal" />
    <job-modal-two @refresh="obj => handleRefresh(obj, 2)" ref="jobModalTwo" />
  </el-row>
</template>

<script>
import { getUserAvocation, updateUserAvocation, createUserAvocation, deleteUserAvocation } from '@/api/archives'
import { openNotification, getSession, setSession } from '@/utils/util'
import JobModal from './JobModal'
import JobModalTwo from './JobModal2'

export default {
  components: {
    JobModal,
    JobModalTwo
  },
  data() {
    return {
      loading: false,
      tableData: [],
      columns: [
        {
          label: '是否存在涉及健康相关产品类',
          prop: 'healthFlag',
          formatter(row, column, cellValue, index) {
            return cellValue === 0 ? '否' : '是'
          }
        },
        {
          label: '是否存在涉及营利性医疗卫生计生机构类',
          prop: 'forProfitHealthCareFlag',
          formatter(row, column, cellValue, index) {
            return cellValue === 0 ? '否' : '是'
          }
        },
        {
          label: '是否存在涉及医药类经营',
          prop: 'medicineFlag',
          formatter(row, column, cellValue, index) {
            return cellValue === 0 ? '否' : '是'
          }
        },
        {
          label: '是否存在其他涉医等经营性活动情况',
          prop: 'otherReferToFlag',
          formatter(row, column, cellValue, index) {
            return cellValue === 0 ? '否' : '是'
          }
        },
        {
          label: '从事或参与其他营利性活动情况',
          prop: 'otherBusiness'
        }
      ],
      columns1: [
        {
          label: '企业名称',
          prop: 'name'
        },
        {
          label: '经营范围',
          prop: 'busiScope'
        },
        {
          label: '注册资金(元)',
          prop: 'regFund'
        },
        {
          label: '本人出资比例(%)',
          prop: 'investPct'
        },
        {
          label: '年利润(元)',
          prop: 'yearProfit'
        },
        { slot: 'action' }
      ],
      tableData1: [],
      columns2: [
        {
          label: '类别',
          prop: 'type'
        },
        { slot: 'medicineFlag' },
        { slot: 'healthFlag' },
        { slot: 'forProfitHealthCareFlag' },
        { slot: 'constructProjecFlag' },
        { slot: 'otherReferToFlag' }
      ],
      tableData2: [],
      columns3: [
        {
          label: '兼职单位名称',
          prop: 'unitName'
        },
        {
          label: '兼职单位性质',
          prop: 'unitNature'
        },
        {
          label: '兼任职务',
          prop: 'duty'
        },
        {
          label: '组织批复文号',
          prop: 'orgReplyNo'
        },
        {
          label: '年取酬(元)',
          prop: 'yearSalary'
        },
        { slot: 'action' }
      ],
      tableData3: [],
      columns4: [
        {
          label: '',
          prop: 'otherBusiness'
        }
      ],
      tableData4: [],
      queryParam: {
        pageSize: 10,
        pageNo: 1
      },
      form: {
        medicineFlag: 0,
        healthFlag: 0,
        forProfitHealthCareFlag: 0,
        constructProjecFlag: 0,
        otherReferToFlag: 0,
        otherBusiness: null
      },
      leaderRow: JSON.parse(this.$route.query.leaderRow)
    }
  },
  methods: {
    // jobModal 新增/修改数据方法处理
    handleRefresh(obj, num) {
      let arr = num === 1 ? 'tableData1' : 'tableData3'
      if (obj.lmId) {
        // 修改
        const index = this[arr].findIndex(v => v.lmId === obj.lmId)
        this[arr].splice(index, 1, obj)
      } else {
        // 新增直接 push
        this[arr].push({ ...obj, lmId: 'xm' + Number(this[arr].length + 1) })
      }
    },
    // 顶上的编辑
    handleAllEdit() {},
    // 顶上的删除
    handleAllDelete() {
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: `您确定删除这条从事或参与营利性活动及兼职情况记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          // 调用删除接口，刷新表格数据
          const res = await deleteUserAvocation(_this.tableData[0].userAvocationId, {})
          // const index = _this[arr].findIndex(v => v.lmId === row.lmId)
          // _this[arr].splice(index, 1)
          if (res.state === '000000') {
            openNotification('success', '删除成功')
          }
        }
      })
      deleteUserAvocation()
    },
    // 顶上的保存
    async handleAllSave() {
      // 保存判断是新增还是修改
      let res = null,
        mes = null
      this.form = Object.assign(this.form, this.tableData2[0], { userId: this.leaderRow.userId })
      this.$set(this.form, 'userAvocationCompanyVO', this.tableData1)
      this.$set(this.form, 'userAvocationParttimeVO', this.tableData3)
      console.log('form', this.form)
      if (this.tableData.length > 0) {
        // 有数据，则是编辑
        res = await updateUserAvocation(this.form)
        mes = '修改操作成功'
      } else {
        // 无数据，则是新增
        res = await createUserAvocation(this.form)
        mes = '新增操作成功'
      }
      if (res.state === '000000') {
        openNotification('success', mes)
        this.handleGetList(this.leaderRow.userId)
      }
    },
    handleEdit(bool, obj) {
      this.$nextTick(() => {
        this.$refs.jobModal.edit(bool, obj)
      })
    },
    handleEdit2(bool, obj) {
      this.$nextTick(() => {
        this.$refs.jobModalTwo.edit(bool, obj)
      })
    },
    async handleGetList(id, param = {}) {
      this.loading = true
      const res = await getUserAvocation(id, param)
      if (res && res.data.length > 0) {
        this.tableData2 = []
        const { state, data } = res
        this.tableData = data
        this.$set(this.form, 'otherBusiness', data[0].otherBusiness)
        this.tableData2.push({ ...data[0], type: '是否需要' })

        if (data[0].userAvocationCompanyVO && data[0].userAvocationCompanyVO.length > 0) {
          this.tableData1 = data[0].userAvocationCompanyVO
          this.tableData1.map((v, i) => {
            v.lmId = 'xm' + Number(i + 1)
          })
        } else {
          this.tableData1 = []
        }

        if (data[0].userAvocationParttimeVO && data[0].userAvocationParttimeVO.length > 0) {
          this.tableData3 = data[0].userAvocationParttimeVO
          this.tableData3.map((v, i) => {
            v.lmId = 'xm' + Number(i + 1)
          })
        } else {
          this.tableData3 = []
        }
      } else {
        this.tableData = []
        this.tableData2.push({ ...this.form, type: '是否需要' })
      }
      this.loading = false
    },
    handleDelete(row, num) {
      let arr = num === 1 ? 'tableData1' : 'tableData3'
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: `您确定删除[${row.name}]这条记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          // 调用删除接口，刷新表格数据
          // const res = await deleteUserAvocation(row.userAvocationId, {})
          const index = _this[arr].findIndex(v => v.lmId === row.lmId)
          _this[arr].splice(index, 1)
          // openNotification('success', '删除成功')
        }
      })
    }
  },
  created() {
    if (this.leaderRow) {
      setSession('leaderRow', this.leaderRow)
    } else {
      this.leaderRow = getSession('leaderRow')
    }
    this.handleGetList(this.leaderRow.userId)
  }
}
</script>

<style scoped>
.fs14 {
  font-size: 14px;
}
</style>
